import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {User, UserService} from '../../../services/user/user.service';
import {StringUtils} from '../../../directives/function/StringUtils';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  username: string;

  password: string;

  msg: string;

  constructor(private router: Router, private userService: UserService) {
  }

  ngOnInit() {
    this.msg = this.userService.message;
  }

  /*
      在前台的页面不需要往数据库中存储数据，但是需要将数据传递到下一个页面。这时候就涉及到了，数据的临时存储。前端的缓存的使用。
       相同点：
       1、作用是一样的，sessionStorage和localStorage一样都是用来存储客户端临时信息的对象。
       2、存储内容类型：两者皆储存字符串类型的数据。
       3、数据存储操作：key-value，操作用法相同。
       不同点：
         生命周期：
      1、sessionStorage：生命周期是当前窗口或标签页，一旦窗口或标签页被关闭了，那么所有通过sessionStorage存储的数据也就被清空了，为了从安全方面考虑建议使用sessionStroage。
      2、localStorage：生命周期是永久，这意味着除非用户显式操作在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
       */
  login(): void {
    let user: User = new User(this.username, this.password);
    let result: boolean;
    this.userService.login(user).subscribe(data => {
      result = StringUtils.checkStatus(data);
    });
    setTimeout(() => {
      if (result) {
        localStorage.setItem('login', this.username);
        sessionStorage.setItem('username', this.username);
      } else {
        this.msg = '用户名或者密码错误';
      }
      this.router.navigateByUrl('/');
    },100)

  }

  register(): void {
    this.router.navigateByUrl('/register');
  }

}
